<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>树形表格</title>
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <main>
        <header id="header"> 树 形 表 格 数 据 </header>
        <!-- 表格内容区 -->
        <div id="container"></div>
        <!-- 编辑弹窗 -->
        <div id="edit">
            <p><span style="color:#409EFF;">编辑</span><button class="btn" id="editClose">关闭</button></p>
            <div id="editForm">
                <label>功能名称: <input type="text" id="menuText" disabled style="cursor: not-allowed;"></label>
                <label>是否启用: 
                <select id="menuIsmodify">
                    <option value="1">启用</option>
                    <option value="0">禁用</option>
                </select></label>
                <label>功能类型:
                    <select id="menuType">
                        <option value="1">菜单</option>
                        <option value="0">链接</option>
                    </select>
                </label>
                <label>创建时间: <input type="text" id="menuCreatetime"></label>
                <label>功能备注: <input type="text" id="menuNote"></label>
                <div>
                    <button class="btn" id="editSave">保存</button>
                    <button class="btn" style="background:#909399;margin-left:40px;" id="editCancle">取消</button>
                </div>
            </div>
        </div>
        <!-- 新增弹窗 -->
        <div id="add">
            <p><span style="color:#409EFF;">新增</span><button class="btn" id="addClose">关闭</button></p>
            <div id="addForm">
                <label>功能名称: <input type="text" id="menuText1"></label>
                <label>是否启用: 
                <select id="menuIsmodify1">
                    <option value="1" selected>启用</option>
                    <option value="0">禁用</option>
                </select></label>
                <label>功能类型:
                    <select id="menuType1">
                        <option value="1">菜单</option>
                        <option value="0" selected>链接</option>
                    </select>
                </label>
                <label>创建时间: <input type="text" id="menuCreatetime1" disabled style="cursor: not-allowed;"></label>
                <label>功能备注: <input type="text" id="menuNote1"></label>
                <div>
                    <button class="btn" id="addSave">保存</button>
                    <button class="btn" style="background:#909399;margin-left:40px;" id="addCancle">取消</button>
                </div>
            </div>
        </div>
    </main>
</body>
<script src="./index.js"></script>
<script type="text/javascript">
    // initData---》存放当前操作完的全局树形数据
    var initData = []
        /*
            getData 函数: JSONP 的函调函数，解决跨域问题。请求本地 JSON 文件
            参数: data---》拿到的 JSON 数据
         */
    function getData(data) {
        initData = JSON.parse(JSON.stringify(formatData(data.menuTree,'')))
        initTable(initData)
    }
</script>
<script type="text/javascript" src="./data.json?callback=getData"></script>

</html>